Tree Node Editing এবং Dynamic Tree Creation

ExtJS তে Tree কম্পোনেন্ট একটি শক্তিশালী উপাদান যা ডেটাকে হায়ারার্কিক্যালভাবে প্রদর্শন করতে ব্যবহৃত হয়। এটি বিশেষ করে ফাইল এক্সপ্লোরার বা ডিরেক্টরি স্ট্রাকচার, বা এমন কোনও সিস্টেম যেখানে আইটেমগুলির একটি অভ্যন্তরীণ সম্পর্ক রয়েছে, সেখানে ব্যবহৃত হয়। ExtJS তে Tree Node Editing এবং Dynamic Tree Creation বেশ কার্যকরী টুলস যা ডেভেলপারদের জন্য অত্যন্ত সুবিধাজনক।

১. Tree Node Editing

Tree Node Editing এর মাধ্যমে আপনি একটি ট্রি নোডের তথ্য সম্পাদনা করতে পারেন। এটি সাধারণত ব্যবহারকারীদের কোনো নির্দিষ্ট ট্রি নোডের নাম, ধরন বা অন্যান্য প্রপার্টি পরিবর্তন করার সুযোগ দেয়। ExtJS তে Ext.tree.Panel এর মাধ্যমে ট্রি কম্পোনেন্ট তৈরি করা যায় এবং editor কনফিগারেশন ব্যবহার করে এটি এডিটিং সক্ষম করা হয়।

Tree Node Editing উদাহরণ

Ext.create('Ext.tree.Panel', {
    title: 'Editable Tree Panel',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "Node 1", leaf: true },
                { text: "Node 2", expanded: true, children: [
                    { text: "Node 2.1", leaf: true },
                    { text: "Node 2.2", leaf: true }
                ]},
                { text: "Node 3", leaf: true }
            ]
        }
    }),
    columns: [
        {
            xtype: 'treecolumn', // tree column type
            text: 'Name',
            flex: 1,
            dataIndex: 'text',
            editor: {
                xtype: 'textfield' // Textfield for node editing
            }
        }
    ],
    plugins: [{
        ptype: 'treeediting', // enables tree node editing
        pluginId: 'treeEditing',
        clicksToEdit: 1  // Number of clicks required to edit a node
    }],
    listeners: {
        edit: function(editor, e) {
            console.log('Node Edited:', e.record.get('text'));
        }
    }
});
Copy

এখানে:

• treeediting প্লাগিন ব্যবহার করা হয়েছে যা ট্রি নোডের এডিটিং সক্ষম করে।
• clicksToEdit: 1: এটি ট্রি নোডে একটি ক্লিক করলে সম্পাদনার জন্য প্রস্তুত করবে।
• editor: textfield এডিটরটি ব্যবহারকারীকে নোডের মান পরিবর্তন করতে দেয়।

এটি ট্রি নোডে পরিবর্তন করার পর edit ইভেন্ট ট্রিগার করবে, যা অ্যাপ্লিকেশনকে জানাবে যে নোডে কী পরিবর্তন হয়েছে।

২. Dynamic Tree Creation

Dynamic Tree Creation এর মাধ্যমে আপনি প্রোগ্রাম্যাটিক্যালি (অথবা ডাইনামিকভাবে) একটি ট্রি তৈরি করতে পারেন। এটি স্টোর বা API থেকে ডেটা লোড করার জন্য ব্যবহার করা হয়, এবং অ্যাপ্লিকেশন চালানোর সময় ট্রি স্ট্রাকচার পরিবর্তন করা যেতে পারে।

Dynamic Tree Creation উদাহরণ

Ext.create('Ext.tree.Panel', {
    title: 'Dynamic Tree Panel',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root Node',
            expanded: true,
            children: [] // Initially empty, will be dynamically filled
        }
    }),
    columns: [
        {
            xtype: 'treecolumn', // tree column type
            text: 'Name',
            flex: 1,
            dataIndex: 'text'
        }
    ]
});

// Dynamically add nodes to the tree
function addNode() {
    var treePanel = Ext.getCmp('treePanelId');
    var rootNode = treePanel.getRootNode();
    
    rootNode.appendChild({
        text: 'New Dynamic Node',
        leaf: true
    });
}

// Adding nodes dynamically after 2 seconds
setTimeout(function() {
    addNode();
    addNode();  // Adding another node
}, 2000);
Copy

এখানে:

• rootNode.appendChild ব্যবহৃত হয়েছে একটি নতুন নোড অ্যাড করার জন্য।
• setTimeout এর মাধ্যমে 2 সেকেন্ড পর ডায়নামিকভাবে নোড যোগ করা হয়েছে।
• Initially, ট্রি স্টোরে কোনও চাইল্ড নোড ছিল না, পরে ডাইনামিকভাবে নোড যোগ করা হয়েছে।

৩. Tree Node Editing এবং Dynamic Tree Creation একসাথে ব্যবহার করা

আপনি Tree Node Editing এবং Dynamic Tree Creation একসাথে ব্যবহার করতে পারেন যাতে ব্যবহারকারী ট্রি নোডে ডেটা এডিট করতে পারে এবং ডাইনামিকভাবে নতুন নোডও তৈরি করতে পারে।

উদাহরণ: Tree Node Editing এবং Dynamic Tree Creation একসাথে

Ext.create('Ext.tree.Panel', {
    title: 'Editable and Dynamic Tree Panel',
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    store: Ext.create('Ext.data.TreeStore', {
        root: {
            text: 'Root Node',
            expanded: true,
            children: [] // Initially empty, will be dynamically filled
        }
    }),
    columns: [
        {
            xtype: 'treecolumn', // tree column type
            text: 'Name',
            flex: 1,
            dataIndex: 'text',
            editor: {
                xtype: 'textfield'
            }
        }
    ],
    plugins: [{
        ptype: 'treeediting', // enables tree node editing
        pluginId: 'treeEditing',
        clicksToEdit: 1
    }],
    listeners: {
        edit: function(editor, e) {
            console.log('Node Edited:', e.record.get('text'));
        }
    }
});

// Dynamically add nodes to the tree
function addNode() {
    var treePanel = Ext.getCmp('treePanelId');
    var rootNode = treePanel.getRootNode();
    
    rootNode.appendChild({
        text: 'New Dynamic Node',
        leaf: true
    });
}

// Adding nodes dynamically after 2 seconds
setTimeout(function() {
    addNode();
    addNode();  // Adding another node
}, 2000);
Copy

এখানে:

• ট্রি তৈরি করা হয়েছে যেখানে ডাইনামিকভাবে নোড যোগ করা যাচ্ছে এবং সেই নোডের নামও এডিট করা যাচ্ছে।
• ব্যবহারকারী একটি নোডে ক্লিক করলে সেটি সম্পাদনা করতে সক্ষম হবে এবং নতুন নোডগুলোও ডাইনামিকভাবে যোগ করা হবে।

৪. Additional Features

• Lazy Loading: আপনি যদি একটি বড় ট্রি স্ট্রাকচার ব্যবহার করেন, তবে আপনি lazy loading (যার মাধ্যমে নোডগুলি ডাইনামিকভাবে লোড হয় যখন প্রয়োজন) ব্যবহার করতে পারেন।
• Drag-and-Drop: ExtJS তে ট্রি কম্পোনেন্টে ড্র্যাগ এবং ড্রপ সমর্থন রয়েছে, যা ব্যবহারকারীদের নোডগুলি সরাতে বা পুনর্বিন্যাস করতে সাহায্য করে।

সারাংশ

1. Tree Node Editing: ExtJS এর মাধ্যমে আপনি ট্রি নোডের ডেটা সম্পাদনা করতে পারেন। এর জন্য treeediting প্লাগিন ব্যবহার করা হয়, যা ব্যবহারকারীদের ট্রি নোড এডিট করার সুযোগ দেয়।
2. Dynamic Tree Creation: ExtJS তে আপনি ডাইনামিকভাবে ট্রি তৈরি করতে পারেন। নতুন নোড যোগ করতে বা ট্রি স্ট্রাকচার পরিবর্তন করতে appendChild ব্যবহার করা হয়।
3. Integration: আপনি এই দুটি বৈশিষ্ট্য একসাথে ব্যবহার করতে পারেন, যা ব্যবহারকারীদের জন্য ট্রি স্ট্রাকচার সম্পাদনা এবং ডাইনামিকভাবে পরিবর্তন করা সহজ করে তোলে।

এই দুটি ফিচারের সমন্বয়ে একটি অত্যন্ত ইন্টারঅ্যাকটিভ এবং ডাইনামিক ট্রি তৈরি করা সম্ভব, যা একটি কার্যকর এবং ইউজার-বান্ধব এক্সপিরিয়েন্স প্রদান করে।